<template>
    <div class="revenue_pay_detail_container">
        <el-dialog v-model="state.show" title="账户收支明细" width="1000px" @closed="onClosed">
            <div class="content">
                <div class="search">
                    <div class="zw-form-layout">
                        <el-form ref="formRef" label-width="auto">
                            <el-row :gutter="24">
                                <el-col :span="8">
                                    <el-form-item label="更新时间">
                                        <el-date-picker
                                            v-model="params.updateAt"
                                            type="daterange"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD HH:mm:ss"
                                            :default-time="defaultDateRange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="变动类型">
                                        <el-select v-model="params.detailAmountType" placeholder="请选择">
                                            <el-option
                                                v-for="item in options"
                                                :label="item.label"
                                                :value="item.value"
                                                :key="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8" class="zw-form-btns">
                                    <el-button type="primary" @click="onSearch">查询</el-button>
                                    <el-button plain @click="onReset">清空</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </div>
                <div class="table_box">
                    <el-table :data="state.list" :border="true" stripe>
                        <el-table-column prop="amount" label="变动值" />
                        <el-table-column prop="tradeType" label="变动类型" />
                        <el-table-column prop="receiptNo" label="备注" />
                        <el-table-column prop="tradeDate" label="更新时间" />
                    </el-table>
                    <div class="pagination zw-pagination">
                        <Pagination
                            :total="state.total"
                            :page-size="params.pageSize"
                            :pageSizes="[10, 20]"
                            :current-page="params.currentPage"
                            @size-change="changeSizeHandler"
                            @pageChange="changePageHandler" />
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import Pagination from '@/components/Pagination.vue';
import request from '@/request';
import { reactive } from 'vue';

const options = [
    { label: '全部', value: '' },
    { label: '收入', value: 'INCOME' },
    { label: '支出', value: 'EXPEND' }
    // { label: '充值', value: 'RECHARGE' }
];
const defaultDateRange = [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)];
const params = reactive({
    accountId: '',
    detailAmountType: '',
    updateAt: [],
    pageSize: 10,
    currentPage: 4,
    startDate: '',
    endDate: ''
});
const state = reactive({
    show: false,
    list: [],
    total: 0
});
const onClosed = () => {};
const getList = async () => {
    let result = {};
    if (params.updateAt?.length) {
        params.startDate = params.updateAt[0];
        params.endDate = params.updateAt[1];
    } else {
        params.startDate = '';
        params.endDate = '';
    }
    Object.keys(params).forEach(key => {
        if (![NaN, null, undefined, ''].includes(params[key])) result[key] = params[key];
    });
    delete result.updateAt;
    const { data } = await request('getBaofuBillListServ', result);
    state.list = data.results || [];
    state.total = data.totalSize || 0;
};

const changeSizeHandler = v => {
    params.currentPage = 1;
    params.pageSize = v;
    getList();
};
const changePageHandler = v => {
    params.currentPage = v;
    getList();
};

const onSearch = () => {
    params.currentPage = 1;
    getList();
};

// 清空
const onReset = () => {
    params.detailAmountType = '';
    params.updateAt = [];
    params.currentPage = 1;
    getList();
};

const onOpen = row => {
    if (row.id != params.accountId) {
        params.accountId = row.id;
        params.currentPage = 1;
        params.pageSize = 10;
        onReset();
    }
    state.show = true;
};
defineExpose({
    onOpen
});
</script>

<style lang="scss" scoped>
.revenue_pay_detail_container {
    .table_box {
        margin-top: 24px;
    }
}
</style>
